<template>
	<transition name="slide">
		<!-- 用户中心组件 -->
    <div class="user-center">
			<!-- 回退 -->
      <div class="back" @click="back">
        <i class="icon-back"></i>
      </div>
			<div class="switches-wrapper">
				<switches @switch="switchItem" :switches="switches" :currentIndex="currentIndex"></switches>
			</div>
				<!-- 随机播放全部 -->
			<div ref="playBtn" class="play-btn" @click="random">
				<i class="icon-play"></i>
				<span class="text">随机播放全部</span>
			</div>

			 <div class="list-wrapper" ref="listWrapper">
					<!-- 我喜欢 -->
					<scroll ref="favoriteList" class="list-scroll" v-if="currentIndex===0" :data="favoriteList">
						<div class="list-inner">
							<song-list :songs="favoriteList" @select="selectSong"></song-list>
						</div>
					</scroll>
					<!-- 最近听 -->
					<scroll ref="playList" class="list-scroll" v-if="currentIndex===1" :data="playHistory">
						<div class="list-inner">
							<song-list :songs="playHistory" @select="selectSong"></song-list>
						</div>
					</scroll>
      </div>
			<!-- 空页面提示 -->
			 <div class="no-result-wrapper" v-show="noResult">
        <no-result :title="noResultDesc"></no-result>
      </div>
			
		</div>
		

			
	</transition>

</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {playlistMixin} from 'common/js/mixin'
import Switches from 'base/switches/switches'
import Scroll from 'base/scroll/scroll'
import SongList from 'base/song-list/song-list'
import NoResult from 'base/no-result/no-result'

export default {
  name: 'usercenter',
	mixins: [playlistMixin],
	data() {
		return {
			currentIndex: 0,
			switches: [//tab
				{
					name: '我喜欢的'
				},
				{
					name: '最近听的'
				}
			]
		}
	},
 methods: {
      handlePlaylist(playlist) {
        const bottom = playlist.length > 0 ? '60px' : ''
        this.$refs.listWrapper.style.bottom = bottom
        this.$refs.favoriteList && this.$refs.favoriteList.refresh()
        this.$refs.playList && this.$refs.playList.refresh()
      },
      switchItem(index) { //tab index
        this.currentIndex = index
      },
      selectSong(song) {//点击歌曲
				let obj={
					id: song.id,
					lrc: song.lrc,
					name: song.name,
					pic: song.pic,
					singer: song.singer,
					time: song.time,
					url: song.url
				}
				this.insertSong(obj)
      },
      back() {
        this.$router.back()
      },
      random() {//随机播放
        let list = this.currentIndex === 0 ? this.favoriteList : this.playHistory
        if (list.length === 0) {
          return
        }
        this.randomPlay({
          list
        })
      },
      ...mapActions([
        'insertSong',
        'randomPlay'
      ])
    },
	computed: {
      noResult() {
        if (this.currentIndex === 0) {
          return !this.favoriteList.length
        } else {
          return !this.playHistory.length
        }
      },
      noResultDesc() {
        if (this.currentIndex === 0) {
          return '暂无收藏歌曲'
        } else {
          return '你还没有听过歌曲'
        }
      },
      ...mapGetters([
        'favoriteList',
        'playHistory'
      ])
    },
	components: {
		Switches,
		Scroll,
		SongList,
		NoResult
	}
}
</script>

<style lang="scss" scoped >
		.user-center{
			position: fixed;
			top: 0;
			bottom: 0;
			z-index: 100;
			width: 100%;
			background: $color-background;
			&.slide-enter-active, &.slide-leave-active{transition: all 0.3s;}
			&.slide-enter, &.slide-leave-to{transform: translate3d(100%, 0, 0);}
			.back{
				position: absolute;
				top: 0;
				left: 6px;
				z-index: 50;
				.icon-back{
					display: block;
					padding: 10px;
					font-size: $font-size-large-x;
					color: $color-theme;
				}
			}
			.switches-wrapper{margin: 10px 0 30px 0;}
			.play-btn{
				box-sizing: border-box;
				width: 135px;
				padding: 7px 0;
				margin: 0 auto;
				text-align: center;
				border: 1px solid  $color-text-l;
				color: $color-text-l;
				border-radius: 100px;
				font-size: 0;
				.icon-play{
					display: inline-block;
					vertical-align: middle;
					margin-right: 6px;
					font-size: $font-size-medium-x;
				}
				.text{
					display: inline-block;
					vertical-align: middle;
					font-size: $font-size-small;
				}
			}
			.list-wrapper{
				position: absolute;
				top: 110px;
				bottom: 0;
				width: 100%;
				.list-scroll{
					height: 100%;
					overflow: hidden;
				}
				.list-inner{
					padding: 20px 30px;
				}
			}
			.no-result-wrapper{@include jucen();}
		}

</style>